<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<%@ include file="/common/meta.jsp"%>
<%@ include file="/common/content.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta name="keyword" content="${webSite.title}" />
		<title>${webSite.title}</title>
		<%@ include file="/jsps/modules/useragent.jsp"%>
		<link
			href="${ctx}/jsps/theme/${webSite.webSkin.filename}/image/common.css"
			rev="stylesheet" rel="stylesheet" type="text/css" />
		<link
			href="${ctx}/jsps/theme/${webSite.webSkin.filename}/image/common_edit.css"
			rev="stylesheet" rel="stylesheet" type="text/css" />
		<!-- 话费充值 -->
		<style type="text/css">
#msg_win {
	border: 1px solid #5A6DA5;
	background: #EAEAEA;
	width: 100%;
	position: absolute;
	right: 0;
	font-size: 12px;
	font-family: Arial;
	margin: 1px 1px;
	display: none;
	overflow: hidden;
	z-index: 99;
}

#msg_win .icos {
	position: absolute;
	top: 2px; *
	top: 0px;
	right: 2px;
	z-index: 9;
}

.icos a {
	float: left;
	color: #833B02;
	margin: 1px;
	text-align: center;
	font-weight: bold;
	width: 14px;
	height: 22px;
	line-height: 22px;
	padding: 1px;
	text-decoration: none;
	font-family: webdings;
}

.icos a:hover {
	color: #fff;
}

#msg_title {
	background: url(images/nav_bg.gif) repeat-x 0 0;
	border-bottom: 1px solid #A67901;
	border-top: 1px solid #FFF;
	border-left: 1px solid #FFF;
	color: #FFF;
	height: 22px;
	line-height: 20px;
	text-indent: 5px;
}

#msg_content {
	overflow: auto;
}
</style>
		<script type="text/javascript">
		
		
		
		<!--
		$(document).ready(function() {
			$("#directOrderForm").validate({
				rules : {
					mobile : {
						required : true,
						maxlength: 11,
						minlength: 11,
						digits:true
					},
					verifyMobile : {
						required : true,
						maxlength: 11,
						minlength: 11,
						digits:true,
						equalTo:"#mobile"
					}
				},
				success : function(label) {
					label.html("&nbsp;").addClass("checked");
				}
			});
			
			$("#mobile").bind("input propertychange", function() {
				getZoneResult();
			});
			$("#cztype").bind("change", function() {
				getZoneResult();
			});
			$("#price").bind("change", function() {
				getZoneResult();
			});
			
		});


		function changeAgentPayment(auth){
			$.ajax({ 
	      		url:'${ctx}/getListAction!getAmountBySalesorder.htm', 
	      		type:'post', 
	      		dataType: 'json', 
	      		data:'id='+$(auth).val(),
			    success: function(json) {
			       $("#amount").html(json.amount);
			       $("#sameamount").val(json.amount);
			       
			    },
			    error: function(XMLHttpRequest, textStatus, errorThrown) {
			       alert("网络出现异常");
			    }
			  });
	    }
		
	    function onlicecz(){
	    	var type = $("#cztype").val();
	    	var price = $("#price").val();
	    	var mobile = $("#mobile").val();
	    	var payMoneyVal = $("#payMoneyVal").val();
	    	var verifyMobile = $("#verifyMobile").val();
	    	if(mobile == null || $.trim(mobile) =="" ){
				alert("请输入手机号码");
				return;
			}else if(verifyMobile == null || $.trim(verifyMobile) == ""){
				alert("输入确认手机号码");
				return;
			}
		    else if(mobile != verifyMobile){
				alert("号码不一致");
				return;
			}else if(payMoneyVal == "-1"){
				alert("号码不存在或者系统不支持当前此业务");
				return;
			}else{
				$.ajax({ 
	      		url:'${ctx}/onlineRechargeAction!onlineRecharge.htm', 
	      		type:'post',
	      		dataType: 'json', 
	      		async:false,
	      		beforeSend: function(){
	      			$("#confirmBt").attr("disabled",true); 
	      		},
	      		data:{
	      			"mobile":mobile,
	      			"price":price,
	      			"type":type
	      		},
			    success: function(json) {
			    	var resultText = json.resultText;
			    	alert(resultText);
			    	$("#confirmBt").attr("disabled",false); 
			    	window.location.reload();
			    },
			    error: function(XMLHttpRequest, textStatus, errorThrown) {
			       alert("网络出现异常");
			    }
			  });
			}
	    }
	 
	    
	    function getZoneResult(){
	    	var mobile = ""+$("#mobile").val();
	    	var price = ""+$("#price").val();
	    	var cztype = ""+$("#cztype").val();
	    	/*
	    	*处理是否需要进行判断
	    	*/
	    	if(mobile.length==11){
		    
		    	$.ajax({ 
		      		url:'${ctx}/onlineRechargeAction!getMobileZone.htm', 
		      		type:'get',
		      		dataType: 'json', 
		      		data:{
		      			'mobile':mobile,
		      			'_price':price,
		      			'_cztype':cztype
		      		},
				    success: function(json) {
				    	$("#payMoneyVal").val(json.payMoney);
		      			if(json.payMoney=="-1"){
			      			$("#payMoney").html("号码不存在或者系统不支持当前此业务");
			      	    }else{
							$("#payMoney").html("需支付金额："+json.payMoney+"元");
					    }
				    },
				    error: function(XMLHttpRequest, textStatus, errorThrown) {
				       alert("网络出现异常");
				    }
				  });
			  }
	    }
	    
	</script>
	</head>
	<body>
		<div id="lian_right">

			<div class="fhao_rigt" id="fhao_rigt">
				<h3 class="yd_menu" id="yd_menu">
					<div class="yd_mon sb" id="hf">
						移动充值
					</div>
				</h3>
				<div class="zjmain" id="zjmain">
					<h3 class="fhao_son" id="subMenu">
						<div class="sb ms_on" id="hf1">
							在线充值
						</div>
					</h3>
					<div class="sub_div" id="sub_div">
						<h3 class="sdo1 mb10">
							注意：1、请先收款后充值；&nbsp;&nbsp;2、请读一遍与客户核对被充值号码和金额；
						</h3>
						<div class="hf1_div" id="hf1_div">
							<form method="post" name="directOrderForm" id="directOrderForm">
								<input type="text" style="display: none" id="payMoneyVal" value=""/>
								<div class="pie_radius">
									<div class="chzhi">
											<p>
												<span id="payMoney" style="color:red;"></span>
											</p>
											<p>
												客户号码：
												<input type="text" class="putMobile" id="mobile"
													name="mobile"  maxlength="11"/>
												<span id="mobileSpan"></span>
												<input type="hidden" id="mobileZone" value=""/>
											</p>
											<p>
												确认号码：
												<input type="text" class="putMobile" id="verifyMobile"
													name="verifyMobile" maxlength="11" />
											</p>
											<p>
												充值方式：
												<select id="cztype" name="cztepe">
													<option value="0">快充</option>
													<option value="1">慢充</option>
												</select>
											</p>
											<p>
												充值金额：
												<select id="price" name="price">
													<option value="10">10</option>
													<option value="20">20</option>
													<option value="30">30</option>
													<option value="50">50</option>
													<option value="100">100</option>
													<option value="150">150</option>
													<option value="200">200</option>
													<option value="300">300</option>
													<option value="500">500</option>
												</select>
											</p>
											<p class="btnp">
												<input type="button" class="btn05 fweit ml76" value="点此充值"
													 id="confirmBt" onclick="javascript:onlicecz();"/>
											</p>
											
									</div>
								</div>
							</form>
						</div>
						
						<h3 class="title1">
							历史记录
						</h3>
						<table cellspacing="0" cellpadding="0" class="result_tb">
							<tbody>
								<tr>
									<th style="width: 110px;">
										订单号
									</th>
									<th style="width: 90px;">
										代理人
									</th>
									<th style="width: 110px;">
										客户号码
									</th>
									<th style="width: 60px;">
										充值金额
									</th>
									<th style="width: 60px;">
										代理价
									</th>
									<th style="width: 100px;">
										充值状态
									</th>
									<th style="width: 100px;">
										充值时间
									</th>
									<th style="width: 120px;">
										产品信息
									</th>
									<th style="width: 120px;">
										备注信息
									</th>
								</tr>

								<c:forEach items="${onlineRechargeList}" var="onlinerecharge">
									<tr>
										<td>
											${onlinerecharge.outtradeid}
										</td>
										<td>
											${onlinerecharge.user.name}
										</td>
										<td>
											${onlinerecharge.account}
										</td>
										<td>
											${onlinerecharge.amount}
										</td>
										<td>
											${onlinerecharge.shikou}
										</td>
										<td>
											${onlinerecharge.state}
										</td>
										<td style="widtd: 200px;">
											<fmt:formatDate value="${onlinerecharge.editetime}"
												pattern="yyyy-MM-dd HH:mm:ss" />
										</td>
										<td>
											${onlinerecharge.productinfo}
										</td>
										<td>
											${onlinerecharge.comments}
										</td>
									</tr>
								</c:forEach>
							</tbody>
						</table>
						
						<s:form action="epIndexNewsAction!directorder.htm" method="get" name="form1"
			theme="simple">
			<table class="listTable2">
				<tr>
					<td width="50%">
						&nbsp;&nbsp;共有
						<s:property value="pager.rowCount" />
						条记录，每页行数：
						<s:select name="pageSize" list="pager.pageSizeIndexs"
							theme="simple" value="pager.pageSize"
							onchange="document.all.pageNo.value='1';document.all.form1.submit();" />
						当前第
						<s:select name="pageNo" list="pager.pageNoIndexs" theme="simple"
							value="pager.pageNo" onchange="document.all.form1.submit();" />
						页
					</td>
					<td width="200px">
						<a
							href="javascript:document.all.pageNo.value='<s:property value="pager.firstPageNo" />';document.all.form1.submit();">
							<img src="${ctx}/image/jwc/first.gif" width="37" height="15" />
						</a>

						<a
							href="javascript:document.all.pageNo.value='<s:property value="pager.prePageNo" />';document.all.form1.submit();">
							<img src="${ctx}/image/jwc/back.gif" width="43" height="15" />
						</a>

						<a
							href="javascript:document.all.pageNo.value='<s:property value="pager.nextPageNo"/>';document.all.form1.submit();">
							<img src="${ctx}/image/jwc/next.gif" width="43" height="15" />
						</a>

						<a
							href="javascript:document.all.pageNo.value='<s:property value="pager.lastPageNo" />';document.all.form1.submit();">
							<img src="${ctx}/image/jwc/last.gif" width="37" height="15" />
						</a>
					</td>
				</tr>
			</table>
		</s:form>
					</div>
				</div>
			</div>
		</div>

	</body>
</html>